<template>
  <div class="bg">
    <LoginHeader title="盛邦升华考试平台登录页" />
    <section class="content">
      <div class="content-left item">
        <div class="desc">
          <h3>登陆说明：</h3>
          <p>●账号设置：账号注册成功后即为个人使用 禁止一账号多人使用</p>
          <p>
            ●忘记密码设置：直接对该账号密码进行重置 且需要该账号拥有者的认证
          </p>
        </div>
      </div>
      <div class="content-right item">
        <div class="tab">
          <LoginTab
          :list="tabList"
          @handleChangeActiveEvent="handleChangeActiveEvent"
          ></LoginTab>
          <div class="tab-content">
          <LoginForm
          v-for="(item,index) in tabList"
          :key="index"
              :formConfig="item.dataConfig"
              :title="item.name"
              v-show="item.isActive"
          >
          </LoginForm>
            <!-- <LoginForm
              :formConfig="dataConfig"
              title="教师登录"
              v-show="!isShow"
            /> -->
          </div>
        </div>
      </div>
    </section>
    <LoginFooter />
  </div>
</template>

<script>
// 引入组件
import LoginHeader from "../../components/login/LoginHeader";
import LoginFooter from "../../components/login/LoginFooter";
import LoginForm from "../../components/login/LoginForm";
import LoginTab from "../../components/login/LoginTab";
export default {
  components: {
    LoginHeader,
    LoginFooter,
    LoginForm,
    LoginTab,
  },
  data() {
    return {
      isShow: false,
      tabList:[
        { 
          isActive:false,
        name: "学员登录",
        dataConfig: [
        {
          type: "text",
          name: "username",
          placeholder: "请输入用户名/身份证号/学号",
          iconUrl: ".././images/yonghu.svg",
        },
        {
          type: "password",
          name: "userpassword",
          placeholder: "请输入密码",
          iconUrl: ".././images/suo.svg",
        },
      ],
        
      },
      { 
          isActive:true,
        name: "老师登录",
        dataConfig: [
        {
          type: "text",
          name: "username",
          placeholder: "请输入用户名",
          iconUrl: "../../assets/images/yonghu.svg",
        },
        {
          type: "password",
          name: "userpassword",
          placeholder: "请输入密码",
          iconUrl: "../../assets/images/suo.svg",
        },
      ],
      },
      ],
    };
  },
  methods: {
    handleChangeActiveEvent(index){
      for(let i=0; i<this.tabList.length;i++){
        this.tabList[i].isActive = false;
      }

      this.tabList[index].isActive = true;
    },
    showStudentForm() {
      this.isShow = true;
    },
    showTeacherForm() {
      this.isShow = false;
    },
  },
};
</script>

<style>
@import url("../../assets/css/login.css");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
